<template>
  <div class="head-line">
    <div class="submit-box body-cont">
      <AddressCard :addr="addressData" :readonly="true" />
      <div class="card-shadow">
        <div class="order-num">
          <span>订单号：<i class="order-no">{{order.subOrderNo || order.orderNo}}</i></span>
        </div>
        <ul>
          <!-- <li class="time">
            <span class="order-time">下单时间：{{order.createDate}}</span>
            <span class="server-time">服务开始时间：{{order.serviceDate}}</span>
          </li> -->
          <li v-if="order.serviceItem">
            <span class="type grey">服务对象：</span> {{order.serviceItem}}
          </li>
          <li v-if="order.phone">
            <span class="type grey">联系方式：</span> {{order.phone}}
          </li>
          <li>
            <span class="type grey">下单时间：</span> {{order.createDate}}
          </li>
          <li v-if="order.serviceDate">
            <span class="type grey">服务时间：</span> {{order.serviceDate}}
          </li>
          <li v-if="order.serviceDuration">
            <span v-if="order.serviceType === 'xsh'" class="flex-box" ><i class="type grey">服务时长：</i> {{order.serviceDuration}}小时</span>
            <span v-else-if="order.serviceType === 'ys'" class="flex-box" ><i class="type grey">服务时长：</i> {{order.serviceDuration}}天</span>
            <span v-else class="flex-box"><i class="type grey" >服务时长：</i> {{rangeData.serviceDuration[order.serviceDuration]}}</span>
          </li>
          <li>
            <span class="type grey">服务类型：</span> <span class="tips">{{serviceInfo[order.serviceType] && serviceInfo[order.serviceType].name}}</span>
          </li>
        </ul>
      </div>
      <div class="card-shadow">
        <ul class="baby-info">
          <li v-for="item in infoList" :key="index">
            <span class="type grey">{{item.name}}：</span> {{item.value}}
          </li>
          <!-- <li><span class="type grey">预产期：</span> 2018年11月28日</li> -->
          <!-- <li><span class="type grey">服务时长：</span> 50天</li> -->
          <li><span class="type grey">服务总价：</span> {{order.orderPrice}}元</li>
        </ul>
        <div v-if="order.remark" class="note">
          <span class="dark font14">备注</span>
          <div class="grey font14">{{order.remark}}</div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button class="btn-full" @tap="goBack" >返回</button>
    </div>
  </div>
</template>
<script>
import getOrderDetail from '@/interface/order/getOrderDetail'
import getAddress from '@/interface/address/getAddress'
import AddressCard from '@/components/AddressCard/index'
import {rangeData, serviceInfo} from '@/config'

export default {
  components: { AddressCard },
  data: {
    rangeData,
    addressData: {},
    order: {},
    infoList: [],
    serviceInfo,
    infoKey: {
      kh: {
        wastelandType: '开荒类型',
        khServiceType: '服务类型',
        timeSlot: '需求时段',
        wastelandArea: '开荒面积'
      },
      bm: {
        demand: '主要需求',
        homeType: '住家类型',
        timeSlot: '需求时段',
        housingArea: '房屋面积',
        babyStatus: '小孩状况',
        petsStatus: '宠物状况'
      },
      xsh: {
        servicePrice: '服务单价'
      },
      ys: {
        fetusType: '胎儿类型'
      },
      yes: {
        homeType: '住家类型',
        timeSlot: '需求时段',
        fimlayNum: '家庭人数',
        babyOld: '宝宝年龄'
      },
      'cffw004': {
        repairType: '修复方式'
      },
      'cffw002': {
        maternalType: '催乳方式'
      },
      'cffw003': {
        serviceFrequency: '服务频次'
      },
      'cffw006': {
        babyOld: '宝宝年龄',
        myzServiceType: '服务类型'
      }
    }
  },
  methods: {
    getInfoList () {
      const obj = serviceInfo[this.order.serviceType].info
      if (!obj) return
      const list = Object.keys(obj).map(v => {
        let value = this.order[v] || '--'
        console.log(rangeData, v)
        if (rangeData[v]) {
          value = rangeData[v][this.order[v]]
        }
        switch (v) {
          case 'wastelandArea':
          case 'housingArea':
            value = value + '平米'
            break
          case 'servicePrice':
            value = value + '元'
            break
          case 'serviceFrequency':
            value = value + '次'
            break
          case 'demand':
            if (this.order[v]) {
              value = this.order[v].split(',').map(val => rangeData[v][val]).join(',')
            }
            break
          default:
            break
        }
        return {name: obj[v], value}
      })
      console.log(list)
      this.infoList = list
    },
    goBack () {
      wx.navigateBack({ delta: 1 })
    }
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  },
  mounted () {
    this.addressData = {}
    this.order = {}
    this.infoList = []

    const { id } = this.$root.$mp.query
    getOrderDetail({ id }).then(data => {
      this.order = data
      getAddress({addressId: data.addressId}).then(res => {
        this.addressData = res
      })
      this.getInfoList()
    })
  }
}
</script>

<style lang="less" >
  page{
    background: #f9f9f9;
    height: 100%;
  }
  .card-shadow {
    margin-bottom: 28rpx;
    background: #fff;
    .note{
      padding: 0rpx 28rpx 52rpx;
    }
  }
  .order-num{
    height: 78rpx;
    line-height: 78rpx;
    border-bottom: 1rpx solid #ddd;
    font-size: 24rpx;
    color:#aaa;
    margin-left: 28rpx;
    .order-no{
      display: inline;
      color: #888;
    }
    .detail{
      float: right;
      color: #3186ff;
      margin-right: 33rpx;
    }
  }
  ul.baby-info{
    padding: 20rpx 28rpx 13rpx;
  }
  ul {
    padding: 0 28rpx 47rpx;
    li {
      font-size: 28rpx;
      color: #333;
      margin: 20rpx 0;
      .tips{
        display: inline-block;
        border-radius: 4rpx;
        background-color: rgb(250, 75, 112);
        height: 54rpx;
        padding: 0 10px;
        line-height: 54rpx;
        text-align: center;
        color: #fff;
      }
    }
    li.time {
      font-size: 24rpx;
      color: #aaa;
      margin-bottom: 24rpx;
      .order-time{
        margin-right: 100rpx;
      }
    }
  }
  .btn-box {
    margin-top: -20px;
  }
</style>